<template>
  <div class="h-full flex flex-col">
    <!-- 标题区域 -->
    <div class="mb-4">
      <h2 class="text-lg font-semibold text-gray-900 mb-1">分析结果</h2>
      <div v-if="isLoading" class="flex items-center space-x-2">
        <div class="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        <p class="text-sm text-blue-600">AI正在分析图片中...</p>
      </div>
      <p v-else-if="analysisResults.length > 0" class="text-sm text-gray-600">
        AI已完成 {{ analysisResults.length }} 张图片的分析
      </p>
      <p v-else class="text-sm text-gray-500">
        上传图片并开始分析后，结果将显示在这里
      </p>
    </div>

    <!-- 内容区域 -->
    <div class="flex-1 overflow-y-auto">
      <div v-if="analysisResults.length > 0 || isLoading" class="space-y-4">
        <!-- 结果统计 -->
        <AnalysisStats v-if="!isLoading && analysisResults.length > 0" :analysisResults="analysisResults" />
        
        <!-- 骨架loading状态 -->
        <div v-if="isLoading" class="space-y-4">
          <div v-for="n in loadingCount" :key="`skeleton-${n}`" class="card p-4">
            <div class="flex gap-4">
              <!-- 图片骨架 -->
              <div class="relative flex-shrink-0">
                <div class="w-48 h-48 bg-gray-200 rounded-lg animate-pulse"></div>
                <div class="absolute top-2 left-2">
                  <div class="w-12 h-5 bg-gray-300 rounded-full animate-pulse"></div>
                </div>
              </div>
              
              <!-- 信息骨架 -->
              <div class="flex-1 min-w-0 space-y-3">
                <div class="flex items-center justify-between">
                  <div class="h-4 bg-gray-200 rounded animate-pulse w-20"></div>
                  <div class="h-3 bg-gray-200 rounded animate-pulse w-16"></div>
                </div>
                <div class="space-y-2">
                  <div class="flex justify-between">
                    <div class="h-3 bg-gray-200 rounded animate-pulse w-12"></div>
                    <div class="h-3 bg-gray-200 rounded animate-pulse w-8"></div>
                  </div>
                  <div class="flex justify-between">
                    <div class="h-3 bg-gray-200 rounded animate-pulse w-8"></div>
                    <div class="h-3 bg-gray-200 rounded animate-pulse w-10"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 结果列表 -->
        <div v-else class="space-y-4">
          <div 
            v-for="(result, index) in analysisResults" 
            :key="index" 
            class="card p-4 hover:shadow-lg transition-shadow"
          >
            <div class="flex gap-4">
              <!-- 图片 -->
              <div class="relative flex-shrink-0">
                <img 
                  :src="result.originalImage" 
                  :alt="`结果 ${index + 1}`" 
                  class="w-48 h-48 object-cover rounded-lg shadow-md"
                />
                <div class="absolute top-2 left-2">
                  <span 
                    class="px-3 py-1 rounded-full text-sm font-medium text-white shadow-md"
                    :class="getStatusBadgeColor(result.status)"
                  >
                    {{ getStatusText(result.status) }}
                  </span>
                </div>
              </div>
              
              <!-- 详细信息 -->
              <div class="flex-1 min-w-0">
                <div class="flex items-center justify-between mb-3">
                  <h3 class="text-base font-medium text-gray-900 truncate">图片 {{ index + 1 }}</h3>
                  <span class="text-sm text-gray-500">{{ result.analysisTime }}ms</span>
                </div>
                
                <div class="space-y-2">
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">置信度:</span>
                    <span class="font-medium text-blue-600">{{ result.confidence }}%</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">状态:</span>
                    <span class="font-medium" :class="getStatusTextColor(result.status)">
                      {{ getStatusText(result.status) }}
                    </span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">分析时间:</span>
                    <span class="font-medium text-gray-900">{{ result.analysisTime }}ms</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div v-if="!isLoading && analysisResults.length > 0" class="flex flex-col gap-2 pt-4 border-t border-gray-200">
          <button @click="$emit('export-results')" class="btn btn-success text-sm py-2">
            <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            <span>导出结果</span>
          </button>
          <button @click="$emit('download-report')" class="btn btn-primary text-sm py-2">
            <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            <span>下载报告</span>
          </button>
          <button @click="$emit('analyze-again')" class="btn btn-secondary text-sm py-2">
            <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
            </svg>
            <span>重新分析</span>
          </button>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-else class="flex flex-col items-center justify-center h-full text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-gray-400 to-gray-500 rounded-xl flex items-center justify-center mb-4">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
          </svg>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">等待分析结果</h3>
        <p class="text-sm text-gray-600">上传图片并开始分析后，结果将显示在这里</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import AnalysisStats from './AnalysisStats.vue'

const props = defineProps({
  analysisResults: {
    type: Array,
    default: () => []
  },
  isLoading: {
    type: Boolean,
    default: false
  },
  loadingCount: {
    type: Number,
    default: 3
  }
})

const emit = defineEmits(['export-results', 'download-report', 'analyze-again'])

const getStatusText = (status) => {
  const statusMap = {
    smooth: '畅通',
    slow: '缓行',
    congested: '拥堵'
  }
  return statusMap[status] || '未知'
}

const getStatusBadgeColor = (status) => {
  const colorMap = {
    smooth: 'bg-green-500',
    slow: 'bg-yellow-500',
    congested: 'bg-red-500'
  }
  return colorMap[status] || 'bg-gray-500'
}

const getStatusTextColor = (status) => {
  const colorMap = {
    smooth: 'text-green-600',
    slow: 'text-yellow-600',
    congested: 'text-red-600'
  }
  return colorMap[status] || 'text-gray-600'
}
</script>
